<template>
  <el-container class="profile-container">
    <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" " class="header">
            <template #icon>
              <el-icon @click="back"><ArrowLeftBold/></el-icon>
            </template>
            <template #content>
              <span class="text">信息修改</span>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <el-card class="form-card">
        <h2>信息修改</h2>
        <el-form :model="data" :rules="rules" ref="profileForm" label-width="100px">
          <el-form-item label="手机号码" prop="phoneNumber">
            <el-input :value="data.phoneNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="data.name" placeholder="请输入真实姓名">{{ data.name }}</el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker v-model="data.birthday" type="date" placeholder="年/月/日" value-format="YYYY-MM-DD"></el-date-picker>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="data.sex" inline>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="修改密码" prop="changePassword">
            <el-switch v-model="changePassword"></el-switch>
          </el-form-item>
          <template v-if="changePassword">
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="data.newPassword" type="password" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmNewPassword">
              <el-input v-model="data.confirmNewPassword" type="password" placeholder="请再次输入新密码"></el-input>
            </el-form-item>
          </template>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';

let router = useRouter();

const data = reactive({
  phoneNumber: '',
  name: '',
  birthday: '',
  age: '',
  sex: '',
  password: '',
  newPassword: '',
  confirmNewPassword: ''
});

const getData = () => {
  axios.get('http://localhost:7000/service-neps/supervisor/getMsg', {
    params: { phoneNumber: sessionStorage.getItem('phoneNumber') }
  }).then(res => {
    console.log(res.data)
    console.log(sessionStorage.getItem('phoneNumber'))
    data.phoneNumber = res.data.phoneNumber;
    data.name = res.data.name;
    data.birthday = res.data.birthday;
    data.age = res.data.age;
    data.sex = res.data.sex;
    data.password = sessionStorage.getItem("oldPassword");
    console.log(res.data);
  }).catch(err => {
    console.error('Failed to fetch data:', err);
  });
};

const changePassword = ref(false);

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== data.newPassword) {
    callback(new Error('请确保确认新密码与新密码一致!'));
  } else {
    callback();
  }
};

let back = function() {
  router.push({ path: "/information" });
};

const rules = reactive({
  name: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
  birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  newPassword: [
    { required: changePassword.value, message: '新密码不能为空', trigger: 'blur' },
    { min: 5, max: 15, message: '新密码长度必须在5-15位', trigger: 'blur' }
  ],
  confirmNewPassword: [
    { required: changePassword.value, message: '确认新密码不能为空', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
});

const handleSubmit = async () => {
  try {
    let updateData = {
      phoneNumber: data.phoneNumber,
      name: data.name,
      birthday: data.birthday,
      sex: data.sex,
      password: data.password
    };
    console.log(updateData)
    if (changePassword.value) {
      updateData.password = data.newPassword;
    }

    await axios.post('http://localhost:7000/service-neps/supervisor/updateMesg', updateData);
    ElMessage.success('保存成功');
  } catch (error) {
    ElMessage.error('保存失败');
  }
};

onMounted(() => {
  getData();
});
</script>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}

.header {
  display: flex;
}

.right {
  margin-left: auto;
}

.historyButton {
  background: #99b1c4;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #96afc5, #96afc3);
  color: white;
  padding: 10px;
  width: 100%;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-card {
  width: 67vw;
  max-width: 400px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
</style>
